<script>
import { layout } from '@/mixins/layout'
import DefaultColumnHeader from '@/portal4.1/pc/component/column/DefaultColumnHeader.vue'
import { template } from '@/mixins/template'
import StatisticsSlot from '@/template/Statistics/PcStatistics/slot/statistics.vue'
import PcNoticeSlot from '@/template/Notice/PcNoticeTemp/solt/PcNoticeSlot.vue'
export default {
  name: 'PcNoticeTempV2',
  components: { StatisticsSlot, DefaultColumnHeader, PcNoticeSlot },
  mixins: [layout, template],
  computed: {
    liStyle() {
      const width = (100 / this.column.length).toFixed(3)
      return { width: width + '%' }
    }
  },
  methods: {
    initStyle(item) {
      return {
        color: item.titleColor
      }
    },
    // 点击统计项，打开类似更多模版
    openVisitingCard(data) {
      if (data.isOpenMore) {
        const entity = {
          id: data.temp,
          name: this.temp.lmmc, // 栏目名称
          dkfs: data.openType, // 打开方式
          url: data.openUrl, // 打开地址
          parentId: this.temp.column ? this.temp.column.menu.id : this.temp.columnId, // 父节点编号
          parentName: this.temp.column ? this.temp.column.menu.name : '', // 父节点名称
          isLiveBos: this.temp.isLiveBos // 是否是livebos
        }
        this.$bus.emit('openMore', entity)
      }
    }
  }
}
</script>

<template>
  <div class="custom-body" :style="borderStyle">
    <!--  模版头  -->
    <default-column-header v-if="showHeader" :temp="temp" />
    <div class="custom-content" :style="contentStyle">
      <div class="custom-content-line">
        <div v-for="(item, index) in column" :key="'item'+index" class="custom-content-item" :style="liStyle" @click="openVisitingCard(item)">
          <span
            :style="{
              color: item.fontColor,
              fontWeight: '600'
            }"
          >
            <statistics-slot :ids="item.sjly.id" :column="item.number" />
          </span>
          <span :style="initStyle(item)">{{ item.label }}</span>
        </div>
      </div>
      <div class="custom-content-title">
        当前存在提醒：
      </div>
      <div class="custom-content-body">
        <pc-notice-slot v-for="(obj, index) in item" :key="index" :content="obj" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.custom-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  .custom-content {
    flex: 1 1;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    .custom-content-line {
      width: 100%;
      height: 80px;
      border-bottom: 1px solid var(--edu-border-100);
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      justify-content: center;
      .custom-content-item {
        height: 100%;
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        span {
          padding: 5px;
          font-size: 0.9rem;
        }
      }
      .custom-content-item:not(:last-child):after {
        content: '';
        position: absolute;
        right: 0;
        top: 20px;
        bottom: 20px;
        width: 2px;
        background: var(--edu-border-100);
      }
    }
  }
}
.custom-content-title {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: var(--edu-text-300);
}
.custom-content-body {
  width: 100%;
  position: relative;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>
